import React, { Component } from 'react';
import { Button, Form, Input, Radio, Select, DatePicker } from 'antd';
import PropTypes from "prop-types";
import http from '../../utils/http';
import MyUpload from '../Upload';
// import ev from '../../utils/event';
const createForm = Form.create;
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const Option = Select.Option;

/*const props = {
    action: 'http://localhost:61110/upload',
    // action: 'http://www.bestzsyl.cn:61110/upload',
    listType: 'picture-card',
    defaultFileList: []
}*/

class StudentForm extends Component {
    
    state = {
        value: 1,
        loading: false,
    }

    // 子组件声明自己需要使用 context
    static contextTypes = {
        color: PropTypes.string,
        callback: PropTypes.func,
    }

    handleReset(e) {
        e.preventDefault();
        this.props.form.resetFields();
    }

    handleSubmit(e) {
        // ev.emit('change', 'aa')  event验证
        e.preventDefault();
        this.props.form.validateFields((errors, values) => {
            if (!!errors) {
                console.log('Errors in form!!!');
                return;
            }
            this.setState({
                loading: true
            })
            // values.birthday.format('YYYY-MM-DD')
            this.saveData(values);
        });
    }

    saveData = async(data) => {
        let _data = await http('post', '/student/createStudent', data);
        if(_data.data.status === 200) {
            this.context.callback('success');
        }
        this.setState({
            loading: false
        })
    }
    
    onStuTypeChange = (e) => {
        this.props.form.setFieldsValue({
            type: e.target.value,
        });
    }

    // 上传头像成功回调
    uploadChange = (value) => {
        this.props.form.setFieldsValue({
            portrait: value,
        });
    }
    
    render() {
        const { getFieldDecorator  } = this.props.form;
        const nameProps = getFieldDecorator ('name', {
            rules: [
                { required: true, message: '用户名必填' }
            ],
        });
        
        const formItemLayout = {
            labelCol: { span: 7 },
            wrapperCol: { span: 12 },
        };

        return (
            <Form horizontal="true">
                <FormItem
                     style={{marginLeft: 180}}>
                        {getFieldDecorator('portrait')(
                            <MyUpload uploadChange={this.uploadChange}/>
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="姓名："
                    hasFeedback>
                        {nameProps (
                            <Input placeholder="请输入姓名" />
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="学员类型：">
                        {getFieldDecorator('type', {
                            initialValue: 1, // 设置初始值
                        })(
                            <RadioGroup onChange={this.onStuTypeChange}>
                                <Radio value={1}>在读</Radio>
                                <Radio value={2}>试听</Radio>
                            </RadioGroup>
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="电话：">
                        {getFieldDecorator('phone', {/*{
                            rules: [{ type: 'string', required: true, message: '电话必填' }],
                        }*/})(
                            <Input type="text" placeholder="请输入电话" />
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="性别：">
                        {getFieldDecorator('sex', {
                            initialValue: 1
                        })(
                            <Select placeholder="请选择性别">
                                <Option value={1}>男</Option>
                                <Option value={2}>女</Option>
                            </Select>
                        )}
                        
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="出生日期：">
                        {getFieldDecorator('birthday')(
                            <DatePicker placeholder="请选择日期" />
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="学员编号：">
                        {getFieldDecorator('studentNo')(
                            <Input type="text" placeholder="请输入学员编号" />
                        )}
                </FormItem>

                <FormItem
                    {...formItemLayout}
                    label="备注：">
                        {getFieldDecorator('notes')(
                            <Input type="textarea" placeholder="备注" />
                        )}
                </FormItem>

                <FormItem wrapperCol={{ span: 12, offset: 7 }}>
                    <Button type="primary" onClick={this.handleSubmit.bind(this)} loading={this.state.loading}>确定</Button>
                    &nbsp;&nbsp;&nbsp;
                    <Button type="ghost" onClick={this.handleReset.bind(this)}>重置</Button>
                </FormItem>
            </Form>
        );
    }
}

StudentForm = createForm()(StudentForm);

export default StudentForm;